import React from 'react';
import {Modal, View, StyleSheet} from 'react-native';
import {ScreenHeight, ScreenWidth} from '../config/devices';
import RewardsModal from './RewardsModal';
import EpisodesModal from './EpisodeModal';
import { AnimationType } from '../context/ModalContext';

type Props = {
  visible: boolean;
  type: ModalType;
  animationType: AnimationType;
  onDismiss: () => void;
  params:any
};

export type ModalType = 'GetTtNowModal' | 'RewardsModal' | 'EpisodesModal';

const ModaleContent = function ({
  type,
  onDismiss,
  params,
}: {
  onDismiss: () => void;
  type: ModalType;
  params?:any
}): JSX.Element {
  switch (type) {
    case 'RewardsModal':
      return <RewardsModal onDismiss={onDismiss} />;
    case 'EpisodesModal':
      return <EpisodesModal onDismiss={onDismiss} params={params}/>;
    default:
      return <RewardsModal />;
  }
};

function BasicsModal({
  visible,
  onDismiss,
  type,
  animationType = 'fade',
  params,
}: Props): JSX.Element {
  return (
    <Modal visible={visible} animationType={animationType} transparent={true}>
      <View style={styles.container}>
        <ModaleContent onDismiss={onDismiss} type={type} params={params}/>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    width: ScreenWidth,
    height: ScreenHeight,
    backgroundColor: 'rgba(0,0,0,0.0)',
  },
  closeModalbtn: {
    width: 100,
    height: 80,
  },
});

export default BasicsModal;
